<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES6-对象字面量的增强写法</title>
  <!-- 
  在ES6中，对象字面量的写法得到了增强，使得创建和使用对象更加简洁和易读。
  1. 属性简写

  在ES6之前，定义对象时需要使用键值对的形式，如果属性名和变量名相同，则需要重复书写。ES6引入了属性简写，允许直接使用变量名作为属性名。
  const name = 'Alice';
  const age = 25;

  // ES6之前的写法
  const person1 = {
      name: name,
      age: age
  };

  // ES6的简写
  const person2 = {
      name,
      age
  };

  console.log(person1); // { name: 'Alice', age: 25 }
  console.log(person2); // { name: 'Alice', age: 25 }
  2. 方法简写
  在ES6中，定义对象的方法时可以省略 `function` 关键字，直接使用方法名。
  const person = {
      name: 'Alice',
      age: 25,
      greet() {
          console.log(`Hello, my name is ${this.name}`);
      }
  };

  person.greet(); // 输出: Hello, my name is Alice
  3. 计算属性名

  ES6允许使用表达式作为对象的属性名，使用方括号 `[]` 来定义计算属性名。这使得动态创建属性名变得更加方便。
  const propName = 'age';
  const person = {
      name: 'Alice',
      [propName]: 25 // 使用计算属性名
  };

  console.log(person); // { name: 'Alice', age: 25 }
  4. 扩展运算符

  ES6引入了对象的扩展运算符 `...` ，可以用来合并对象或克隆对象。
  const person = {
      name: 'Alice',
      age: 25
  };

  const additionalInfo = {
      gender: 'female',
      country: 'USA'
  };

  // 合并对象
  const mergedPerson = { ...person, ...additionalInfo };

  console.log(mergedPerson); // { name: 'Alice', age: 25, gender: 'female', country: 'USA' }

  // 对象克隆
  const clonedPerson = { ...person };
  console.log(clonedPerson); // { name: 'Alice', age: 25 }
  5. 总结

  ES6对对象字面量的增强写法使得创建和使用对象的方式更加简洁和直观。这些新特性包括属性简写、方法简写、计算属性名和扩展运算符等，极大地提高了代码的可读性和可维护性。在实际开发中，合理利用这些新特性可以使代码更加优雅和高效。
   -->
</head>

<body>

  <script>
    const name = 'Alice';
    const age = 25;
    const key = 'name' + 'address';

    const person = {
      // 1. 属性增强写法
      name,
      age,
      // 2. 方法增强写法

      greet() {
        console.log(`Hello, my name is ${this.name}`);
      },
      running() {
        console.log(this, ' is running');
      },
      // 3.计算属性名
      [key]: "广州"

    };

    person.greet(); // 输出: Hello, my name is Alice
    person.running(); // 输出: { name: 'Alice', age: 25, greet: [Function: greet], running: [Function: running] } is running
    console.log(person[key]); // 输出: 广州

    function foo() {
      return {
        name: 'Bob',
        age: 30
      }
    }

    const person2 = {
      ...foo()
    }

    console.log(person2); // 输出: { name: 'Bob', age: 30}

  </script>

</body>

</html>